{% extends 'layout/basic.html' %}
{% load static %}
{% block title %}
注册页面
{% endblock %}

{% block css %}
    <style>
        .account{
            border: 1px solid #e8e5e5;
            padding: 10px 20px;
            /* 阴影效果 x y z 颜色 */
            box-shadow: 5px 10px 20px rgba(0,0,0,0.5);
        }

    </style>
    <link rel="stylesheet" href="{% static 'css/error.css' %}">

{% endblock %}


{% block content %}
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-md-offset-4">
                <div class="account">
                    <h2 class="text-center">用户注册</h2>
                <form id="form_data">
                    {% csrf_token %}
                    {% for field in form %}
                        {% if field.label == '验证码' %}
                            <div class="form-group">
                                <label for="{{ field.id_for_label }}">{{ field.label }}</label>

                            <div class="row">
                                <label for="{{ field.id_for_label }}">{{ field.label }}</label>

                            <div class="row">
                                <div class="col-xs-6">
                                    {{ field }}
                                    <span class="error_msg"></span>
                                </div>
                                <div class="col-xs-6">
                                    <button id="get_code" type="button" class="btn btn-default" >点击获取验证码</button>
                                </div>
                            </div>


                                <div class="col-xs-6">
                                    {{ field }}
                                    <span class="error_msg"></span>
                                </div>
                                <div class="col-xs-6">
                                    <button id="get_code" type="button" class="btn btn-default" >点击获取验证码</button>
                                </div>
                            </div>

                      </div>

                        {% else %}
                            <div class="form-group">
                                <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                                {{ field }}
                                <span class="error_msg"></span>
                              </div>
                        {% endif %}

                    {% endfor %}



                  <button type="button" id="register" class="btn btn-primary">注 册</button>
                </form>
                </div>

            </div>
        </div>
    </div>




{% endblock %}


{% block js %}
    <script>
        {#   1. 绑定点击事件  2. 获取手机号 3.发送ajax请求 4 根据ajax请求的结果做一些页面提示效果 #}
        $(function () {
            bindGetCodeEvent();
            sendRegisterData();

        });

        // 绑定点击获取验证码的事件
        function bindGetCodeEvent(){

            $('#get_code').click(function () {
                var phoneEle = $('#id_phone');
                var phone_num = phoneEle.val().trim();
                // 前端校验手机号格式
                var phone_reg = /^(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
                if (phone_num && phone_reg.test(phone_num)){
                    phoneEle.next().text('');
                    // 校验通过之后，发送ajax请求，
                    $.ajax({
                        url:'{% url "sms_code" %}',
                        type:'get',
                        //tpl 短信模板
                        data:{phone:phone_num, tpl:"register"},
                        success:function (res) {
                            if (res.status){
                                SmsTimer();// 开始倒计时效果
                            }
                            else {
                                console.log(res);
                                phoneEle.next().text(res.error_msg.phone);
                            }
                            {#console.log('>>>',res);#}
                        }
                    })
                }else {
                    phoneEle.next().text('前端说：手机号格式有误！')
                    return false;
                }


            })
        }

        // 倒计时效果函数
        function SmsTimer() {
            // 前端的变量一般是驼峰体写法
            // jquery的变量一般是$开头
            // 1 将标签设置为不可点击的效果
            var $btnEle = $('#get_code');
            // selected\checked\disabled\enabled -- prop
            // 其他属性操作 -- attr
            $btnEle.prop('disabled', true);

            // 2 设置定时器读秒效果，和标签文本内容的修改
            var timer = 60;
            var t = setInterval(
                function () {
                    $btnEle.text(`(${timer})重新发送`);
                    timer--
                    if (timer <= 0){
                        clearInterval(t);
                        $btnEle.prop('disabled', false);
                        $btnEle.text(`点击发送验证码`);
                    }
                },
                1000
            )



        }

        // 点击注册发送ajax请求
        function sendRegisterData() {
            // 1 绑定点击事件
            $('#register').click(function () {
                // 2 获取用户输入的所有数据
                var data = $('#form_data').serialize();

                // console.log('>>>>>', data)
                // 3 将数据发送到后端
                $.ajax({
                    url:'{% url "register" %}',
                    type:'post',  // content-type:...urlencoded -- username=chao&password=123
                    data: data, //{username:'chao',password:123}
                    success:function (res) {
                        if (res.status){
                            {#console.log(res);#}
                            {#console.log('>>>>>',res.path)#}
                            location.href = res.path;
                        }else {
                            for (var key in res.error_msg){
                                {#console.log(key);#}
                                $('#id_' + key).next().text(res.error_msg[key][0])
                            }
                            // 通过each完成上面的功能
                            {#phoneEle.next().text(res.error_msg.phone);#}
                            {#console.log(res.error_msg)#}
                        }
                    }

                })
                // 4 根据响应结果，进行一些效果处理
            })

        }



    </script>




{% endblock %}

